/*
* Copyright (c) 2025 Huawei Device Co., Ltd.
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including but not limited to the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to provide persons with access to the Software
* subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGE OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*/

.nav {
   display: flex;
   flex-direction: column;

   .head {
     height: 56px;
     display: flex;
     margin: 0 16px;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 8px;

     .music_icon {
       display: flex;
       align-items: center;

       .music_img {
         display: flex;
         align-items: center;
         justify-content: center;
         width: 40px;
         height: 40px;
         background: url(../../assets/images/circularBackground.png) no-repeat;
         background-position: 0% 0%;
         background-size: 100% 100%;
         margin-right: 8px;
       }

       .music_title {
         color: rgba(0, 0, 0, 0.9);
         font-family: 鸿蒙黑体;
         font-size: 20px;
         font-weight: 700;
         line-height: 27px;
         letter-spacing: 0px;
         text-align: left;
       }
     }

     .music_search {
       display: flex;
       align-items: center;
       justify-content: center;
       width: 40px;
       height: 40px;
       background: url(../../assets/images/circularBackground.png) no-repeat;
       background-position: 0% 0%;
       background-size: 100% 100%;
     }

     .music_search_pc {
       width: 400px;
       display: flex;
       align-items: center;
       position: relative;
       height: 40px;
       background-position: 0% 0%;
       border-radius: 24px;
       background: rgba(0, 0, 0, 0.05);

       img {
         width: 20px;
         height: 20px;
         position: absolute;
         top: 10px;
         left: 10px;
       }

       span {
         color: rgba(0, 0, 0, 0.6);
         font-family: 鸿蒙黑体;
         font-size: 16px;
         font-weight: 400;
         letter-spacing: 0px;
         text-align: left;
         margin-left: 40px;
       }
     }
   }

   .nav_info {
     padding: 0 16px;

    .mobileBtn::-webkit-scrollbar{
      display: none;
    }

     .mobileBtn {
       height: 36px;
       display: flex;
       justify-content: space-between;
       margin-bottom: 8px;
       overflow-x: auto;
       scrollbar-width: none;
       -ms-overflow-style: none;

       span {
         width: 15%;
         display: block;
         line-height: 36px;
         text-align: center;
         background: #fff;
         color: rgba(0, 0, 0, 0.6);
         border-radius: 20px;
         min-width: 96px;
         margin-right: 12px;
       }

       span:nth-child(1) {
         background-color: rgb(255, 25, 73);
         color: #fff;
       }
     }

     .pcBtn {
       height: 36px;
       display: flex;
       justify-content: flex-start;
       margin-bottom: 8px;

       span {
         width: 175px;
         display: block;
         line-height: 36px;
         text-align: center;
         background: #fff;
         color: rgba(0, 0, 0, 0.6);
         border-radius: 20px;
         margin-right: 24px;
       }

       span:nth-child(1) {
         background-color: rgb(255, 25, 73);
         color: #fff;
       }
     }

     .content_head {
       height: 48px;
       padding: 8px 0;
       box-sizing: border-box;
       display: flex;
       align-items: center;
       justify-content: space-between;

       .content_head_info {
         height: 32px;
         display: flex;
         align-items: center;

         img {
           margin-right: 8px;
         }

         span {
           color: rgba(0, 0, 0, 0.9);
           font-family: 鸿蒙黑体;
           font-size: 18px;
           font-weight: 700;
           line-height: 24px;
           margin-right: 10px;
         }
       }
     }
   }
 }